<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的事件</title>
</head>
<body>
<form action="#" id="form">
    <input name="username" id="username">
    <select id="city">
        <option>请选择</option>
        <option>河北</option>
        <option>北京</option>
        <option>四川</option>
    </select>
    <input type="submit" value="提交">
</form>

<script>
    /*
        常见的事件:
			1.点击事件:
				1.onclick: 单击事件
				2.ondblclick: 双击事件

			2.焦点事件
				1.onblur: 失去焦点
				2.onfocus: 元素获得焦点

			3.加载事件:
				1.onload: 一张页面或一幅图像完成加载

			4.鼠标事件:
				1.onmousedown 鼠标按钮被按下
				    定义方法时,定义一个形参,接受 event 对象
					event 对象的 button 属性可以获取鼠标按钮键被点击
				2.onmouseup	  鼠标按键被松开
				3.onmousemove 鼠标被移动
				4.onmouseover 鼠标移到某元素之上
				5.onmouseout  鼠标从某元素移开

			5.键盘事件:
				1.onkeydown		某个键盘按键被按下
				2.onkeyup		某个键盘按键被松开
				3.onkeypress	某个键盘按键被按下并松开

			6.选择和改变:
				1.onchange		域的内容被点击
				2.onselect		文本被选中

			7.表单事件:
				1.onsubmit		确认按钮被点击
				2.onreset		重置按钮被点击

     */

    //2.加载完成事件 onload
    window.onload = function () {
        // //1失去焦点事件
        // document.getElementById("username").onblur = function () {
        //     alert("我失去焦点了");
        // }
        // //2.获取焦点
        // document.getElementById("username").onfocus = function () {
        //     alert("我获得焦点了");
        // }
        // //3.获取鼠标事件
        // //鼠标按下事件
        // document.getElementById("username").onmousedown = function (event) {
        //     alert(event.button);
        // }
        //键盘事件
        //某个键盘按键被按下
        document.getElementById("username").onkeydown = function (event) {
            // alert(event.keyCode);
            if (event.keyCode == 13){
                alert("提交表单");
            }
        }

        //选择和改变
        document.getElementById("city").onchange = function () {
            alert("改变了");
        }

        //表单事件
        //确认按钮被点击
        // document.getElementById("form").onsubmit = function () {
        //     //校验用户名格式是否正确
        //     var flag = false;
        //
        //     return flag;
        // }



    }

</script>

</body>
</html>





























